import React, { Component } from 'react'
import SearchInput from '../../components/searchInput/SearchInput'
import { Carousel, Flex, NavBar } from 'antd-mobile';
import { withRouter } from 'react-router-dom'

// 进行链接库
import { connect } from "react-redux";
//导入仓库
import store from '../../store'
import { getHomeSwiperImg, getHomeNavList, getHomeProduct } from '../../store/actionCreator'
import './Home.scss'

class Home extends Component {
    componentDidMount() {
        store.dispatch(getHomeSwiperImg())//获取轮播图
        store.dispatch(getHomeNavList())//获取导航
        store.dispatch(getHomeProduct())//首页商品
    }
    // 跳转分类
    handFlClick = () => {
        this.props.history.push('/category')
    }
    // 跳转详情页
    handDetailClick = (goods_id) => {
        this.props.history.push('/detail/' + goods_id)
    }
    // 跳转商品列表
    hangListClick = (query) => {
        console.log(query.split('=')[1])
        this.props.history.push("/goodsList?query=" +query.split('=')[1]);
    }
    render() {
        return (
            <div className='yg-home'>
                {/* 首页导航开始 */}
                <div className='yg-home-nav-title'>
                    <NavBar className='nav-title'>优购商城</NavBar>
                </div>
                {/* 首页导航结束 */}
                {/* 首页搜索框开始 */}
                <div className='yg-home-search'>
                    <SearchInput />
                </div>
                {/* 首页搜索框结束 */}
                {/* 轮播图开始 */}
                <div className='yg-home-swiper'>
                {
                    this.props.isShow && (
                        <Carousel autoplay infinite>
                            {this.props.swiperList && this.props.swiperList.map(val => (
                                <div
                                    key={val}
                                    style={{ display: 'inline-block', width: '100%', height: this.props.imgHeight }}
                                    onClick={this.handDetailClick.bind(this, val.goods_id)}
                                >
                                    <img
                                        src={val.image_src}
                                        alt=""
                                        style={{ width: '100%', verticalAlign: 'top' }}
                                        onLoad={() => {
                                            window.dispatchEvent(new Event('resize'));
                                            this.setState({ imgHeight: 'auto' });
                                        }}
                                    />
                                </div>
                            ))}
                        </Carousel>
                    )
                }
                </div>
                {/* 轮播图结束 */}
                {/* 首页导航开始 */}
                <div className='yg-home-catitems'>
                    <div className="catitems-item">
                        <Flex>
                            {
                                this.props.navList.map((item) => {
                                    return (
                                        <Flex.Item key={item.name} onClick={this.handFlClick}><img src={item.image_src} alt=''></img></Flex.Item>
                                    )
                                })
                            }
                        </Flex>
                    </div>
                </div>
                {/* 首页导航结束 */}
                {/* 商品分类开始 */}
                <div className='yg-home-product'>
                    {
                        this.props.productList.map((item, index) => {
                            return (
                                <div className='product-item' key={item.floor_title.image_src}>
                                    {/* 商品标题开始 */}
                                    <div className='product-item-title'>
                                        <img src={item.floor_title.image_src} alt="" />
                                    </div>
                                    {/* 商品标题结束 */}
                                    {/* 商品内容开始 */}
                                    <div className='product-content'>
                                        {item.product_list.map((v, i) => {
                                            return (
                                                <div className="image-list-item" key={v.image_src} onClick={this.hangListClick.bind(this, v.navigator_url)}>
                                                    <img alt='' src={v.image_src}></img>
                                                </div>
                                            )
                                        })}
                                    </div>
                                    {/* 商品内容结束 */}
                                </div>
                            )
                        })
                    }
                </div>
                {/* 商品分类结束 */}
            </div>
        )
    }
}

//注入属性
const mapStateToProps = (state) => {
    return {
        imgHeight: state.HomeReducer.imgHeight,
        swiperList: state.HomeReducer.swiperList,
        navList: state.HomeReducer.navList,
        productList: state.HomeReducer.productList,
        isShow: state.HomeReducer.isShow
    }

}

//导出
export default connect(mapStateToProps, null)(withRouter(Home));
